<template>
	<view class="template-login">
		<!-- 顶部自定义导航 -->
		<!--    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar> -->


		<view class="login">
			<!-- 顶部背景图片-->
			<view class="login__bg login__bg--top">
				<image class="bg" :src="baseUrl + '/img/202309122353596.jpg'" mode="widthFix"></image>
			</view>
			<view class="login__bg login__bg--top">
				<image class="rocket rocket-sussuspension" :src="baseUrl + '/img/c4d7.png'" mode="widthFix">
				</image>
			</view>

			<view class="login__wrapper__bottom" v-if="isUniverifyLogin">
				 <!-- 一键登录内容 -->
				 <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
					<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover"
						:hover-stay-time="150" @click="tologin" :loading="univerifyBtnLoading">{{ '一键登录' }}
					</view>
					
					<view class="login__info__item__tips">
						<button type="primary" class="page-body-button"</button>
					</view>
				</view>
				
			</view>
			
			
			<view class="login__wrapper" v-else>
				<!-- 登录/注册切换 -->
				<view
					class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
					<view class="login__mode__item tn-flex-1"
						:class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
						登录
					</view>
					<view class="login__mode__item tn-flex-1"
						:class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
						注册
					</view>

					<!-- 滑块-->
					<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
				</view>

				<!-- 输入框内容-->
				<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
					<!-- 登录 -->
					<block v-if="currentModeIndex === 0">
						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-phone"></view>
							</view>
							<view class="login__info__item__input__content">
								<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录账号"
									v-model="loginInfo.username" />
							</view>
						</view>

						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-lock"></view>
							</view>
							<view class="login__info__item__input__content">
								<input :password="!showPassword" placeholder-class="input-placeholder"
									placeholder="请输入登录密码" v-model="loginInfo.password" />
							</view>
							<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
								<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
							</view>
						</view>
					</block>
					<!-- 注册 -->
					<block v-if="currentModeIndex === 1">
						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-phone"></view>
							</view>
							<view class="login__info__item__input__content">
								<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册登录账号"
									v-model="registerInfo.username" />
							</view>
						</view>

						<!--            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-code"></view>
              </view>
              <view class="login__info__item__input__content login__info__item__input__content--verify-code">
                <input placeholder-class="input-placeholder" placeholder="请输入验证码" />
              </view>
              <view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
                <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
              </view>
            </view> -->

						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-lock"></view>
							</view>
							<view class="login__info__item__input__content">
								<input :password="!showPassword" placeholder-class="input-placeholder"
									placeholder="请输入登录密码" v-model="registerInfo.password" />
							</view>
							<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
								<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
							</view>
						</view>

						<view
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-lock"></view>
							</view>
							<view class="login__info__item__input__content">
								<input :password="!showPassword" placeholder-class="input-placeholder"
									placeholder="请再次输入登录密码" v-model="registerInfo.password2" />
							</view>
							<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
								<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
							</view>
						</view>

					</block>

					<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover"
						:hover-stay-time="150" @click="onlogin">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>

					<!-- <view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view> -->
				</view>

				<!-- 其他登录方式 -->
				<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
<!-- 				  <view class="tn-padding-sm tn-margin-xs">
					<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
					  <view class="tn-icon-wechat-fill"></view>
					</view>
				  </view> -->
				  <view class="tn-padding-sm tn-margin-xs">
					<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
					  <view class="tn-icon-phone-fill" @click="tologin"></view>
					</view>
				  </view>
<!-- 				  <view class="tn-padding-sm tn-margin-xs">
					<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
					  <view class="tn-icon-qq"></view>
					</view>
				  </view> -->
				</view>
			</view>


			<!-- 底部背景图片-->
			<view class="login__bg login__bg--bottom">
				<image :src="baseUrl + '/img/202309122353596.jpg'" mode="widthFix"></image>
			</view>
		</view>

		<!-- 验证码倒计时 -->
		<tn-verification-code ref="code" uniqueKey="login-demo-1" :seconds="60" @change="codeChange">
		</tn-verification-code>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import {
		register,
		login,
		phoneNumberLogin
	} from "@/apis/auth.js"
	import {
		getToken,
		setToken,
		setRefreshToken
	} from '@/utils/auth';
	import config from '@/config/config.js'
	const univerifyInfoKey = 'univerifyInfo';

	export default {
		name: 'login-demo-1',
		mixins: [template_page_mixin],
		data() {
			return {
				loginInfo: {
					username: "",
					password: ""
				},
				registerInfo: {
					username: "",
					password: "",
					password2: ""
				},
				// 当前选中的模式
				currentModeIndex: 0,
				// 模式选中滑块
				modeSliderStyle: {
					left: 0
				},
				// 是否显示密码
				showPassword: false,
				// 倒计时提示文字
				tips: '获取验证码',
				baseUrl: '',
				providerList: [],
				univerifyBtnLoading: false,
				isUniverifyLogin: true,
				hasLogin: false
			}
		},
		onLoad() {
			uni.getProvider({
				service: 'oauth',
				success: (result) => {
					this.providerList = result.provider.map((value) => {
						let providerName = '';
						switch (value) {
							case 'univerify':
								providerName = '一键登录'
								break;
						}
						return {
							name: providerName,
							id: value
						}
					});

				},
				fail: (error) => {
					console.log('获取登录通道失败', error);
				}
			});
			
			this.isUniverifyLogin = uni.getStorageSync('isUniverifyLogin');

			// if (this.hasLogin && this.isUniverifyLogin) {
			// 	this.getPhoneNumber(uni.getStorageSync(univerifyInfoKey)).then((phoneNumber) => {
			// 		this.phoneNumber = phoneNumber
			// 	})
			// }
		},
		onShow() {
			this.baseUrl = config.baseUrl;
		},
		watch: {
			currentModeIndex(value) {
				const sliderWidth = uni.upx2px(476 / 2)
				this.modeSliderStyle.left = `${sliderWidth * value}px`
			}
		},
		methods: {
			// 切换模式
			modeSwitch(index) {
				this.currentModeIndex = index
				this.showPassword = false
			},
			onlogin() {
				if (this.currentModeIndex === 0) {
					uni.showLoading({
						title: '登录中...',
						mask: true
					});
					login(this.loginInfo).then(res => {
						const {
							token,
							refreshToken,
							user_Id
						} = res;
						setToken(token);
						setRefreshToken(refreshToken);
						uni.setStorageSync('user_Id', user_Id)
						this.$func.tnRelunch("/pages/sign/sign");
						this.loginInfo.username = "";
						this.loginInfo.password = "";
					})
				} else {
					if (this.registerInfo.username == "") {
						this.$func.showToast('请输入登录账号')
						return
					}
					if (this.registerInfo.password !== this.registerInfo.password2) {
						this.$func.showToast('两次输入的密码不一致')
						return
					}
					register(this.registerInfo).then(res => {
						this.$func.showToast('注册成功')
						const {
							userId
						} = res;

						setTimeout(() => {
							this.modeSwitch(0);
							this.registerInfo.username = "";
							this.registerInfo.password = "";
							this.registerInfo.password2 = "";
						}, 1000);
					})
				}
			},
			// 获取验证码
			getCode() {
				if (this.$refs.code.canGetCode) {
					this.$t.message.loading('正在获取验证码')
					setTimeout(() => {
						this.$t.message.closeLoading()
						this.$t.message.toast('验证码已经发送')
						// 通知组件开始计时
						this.$refs.code.start()
					}, 2000)
				} else {
					this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
				}
			},
			// 获取验证码倒计时被修改
			codeChange(event) {
				this.tips = event
			},
			tologin() {
				
				this.univerifyBtnLoading = true;

				// 一键登录已在APP onLaunch的时候进行了预登陆，可以显著提高登录速度。登录成功后，预登陆状态会重置
				uni.login({
					provider: 'univerify',
					success: async (res) => {
						console.log('login success:', res);

						// #ifdef APP-PLUS
						await this.loginByUniverify('univerify', res)
						// #endif
					},
					fail: (err) => {
						console.log('login fail:', err);

						// 一键登录点击其他登录方式
						if (err.code == '30002') {
							uni.closeAuthView();
							this.isUniverifyLogin = false;
							return;
						}

						// 一键登录预登陆失败
						if (err.code == '30005') {
							uni.showModal({
								showCancel: false,
								title: '预登录失败',
								content: this.univerifyErrorMsg || err.errMsg
							});
							return;
						}

					},
					complete: () => {
						this.univerifyBtnLoading = false;
					}
				});
			},
			async loginByUniverify(provider, res) {
				uni.closeAuthView();

				const univerifyInfo = {
					provider,
					...res.authResult,
				}

				try {
					const phoneNumber = await this.getPhoneNumber(univerifyInfo);
					
					phoneNumberLogin({
						phone_number: phoneNumber
					}).then(res => {
						this.$func.showToast('登录成功');
						const {
							token,
							refreshToken,
							user_Id
						} = res;
						setToken(token);
						setRefreshToken(refreshToken);
						uni.setStorageSync('user_Id', user_Id)
						this.$func.tnRelunch("/pages/sign/sign");
						
						// uni.setStorageSync(univerifyInfoKey, univerifyInfo);
					})
				} catch (err) {
					console.error('获取手机号失败:', err);
					uni.showModal({
						showCancel: false,
						title: '手机号获取失败',
						content: `${err.errMsg || '未知错误'}\n错误码：${err.code || '未知'}`
					});
				}
			},
			getPhoneNumber(univerifyInfo) {
				return new Promise((resolve, reject) => {
					uniCloud.callFunction({
						name: 'login',
						data: univerifyInfo
					}).then(res => {
						if (res.result && res.result.code === 0) {
							resolve(res.result.num);
						} else {
							reject({
								code: res.result.code || -1,
								errMsg: res.result.message || '获取手机号失败',
								result: res
							});
						}
					}).catch(err => {
						reject({
							code: err.code || -2,
							errMsg: err.message || '云函数调用失败',
							error: err
						});
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	/* 悬浮 */
	.rocket-sussuspension {
		animation: suspension 3s ease-in-out infinite;
	}

	@keyframes suspension {

		0%,
		100% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(-0.8rem, 1rem);
		}
	}

	.login {
		position: relative;
		height: 100%;
		z-index: 1;

		/* 背景图片 start */
		&__bg {
			z-index: -1;
			position: fixed;

			&--top {
				top: 0;
				left: 0;
				right: 0;
				width: 100%;

				.bg {
					width: 750rpx;
					will-change: transform;
				}

				.rocket {
					margin: 50rpx 28%;
					width: 400rpx;
					will-change: transform;
				}
			}

			&--bottom {
				bottom: -10rpx;
				left: 0;
				right: 0;
				width: 100%;
				// height: 144px;
				margin-bottom: env(safe-area-inset-bottom);

				image {
					width: 750rpx;
					will-change: transform;
				}
			}
		}

		/* 背景图片 end */

		/* 内容 start */
		&__wrapper {
			margin-top: 403rpx;
			width: 100%;
		}
		
		&__wrapper__bottom {
			margin-top: 60vh;
			width: 100%;		
		}

		/* 切换 start */
		&__mode {
			position: relative;
			margin: 0 auto;
			width: 476rpx;
			height: 77rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
			border-radius: 39rpx;

			&__item {
				height: 77rpx;
				width: 100%;
				line-height: 77rpx;
				text-align: center;
				font-size: 31rpx;
				color: #908f8f;
				letter-spacing: 1em;
				text-indent: 1em;
				z-index: 2;
				transition: all 0.4s;

				&--active {
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			&__slider {
				position: absolute;
				height: inherit;
				width: calc(476rpx / 2);
				border-radius: inherit;
				box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
				z-index: 1;
				transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			}
		}

		/* 切换 end */

		/* 登录注册信息 start */
		&__info {
			margin: 0 30rpx;
			margin-top: 105rpx;
			padding: 30rpx 51rpx;
			padding-bottom: 0;
			border-radius: 20rpx;
			background-color: #ffff;
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

			&__item {

				&__input {
					margin-top: 59rpx;
					width: 100%;
					height: 77rpx;
					border: 1rpx solid #E6E6E6;
					border-radius: 39rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						color: #AAAAAA;
					}

					&__content {
						width: 80%;
						padding-left: 10rpx;

						&--verify-code {
							width: 56%;
						}

						input {
							font-size: 24rpx;
							// letter-spacing: 0.1em;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 44rpx;
						margin-right: 20rpx;
						color: #AAAAAA;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}
				}

				&__button {
					margin-top: 75rpx;
					margin-bottom: 39rpx;
					width: 100%;
					height: 77rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					letter-spacing: 1em;
					text-indent: 1em;
					border-radius: 39rpx;
					box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
				}

				&__tips {
					margin: 30rpx 0;
					color: #AAAAAA;
				}
			}
		}

		/* 登录注册信息 end */

		/* 登录方式切换 start */
		&__way {
			margin: 0 auto;
			margin-top: 110rpx;

			&__item {
				&--icon {
					width: 77rpx;
					height: 77rpx;
					font-size: 50rpx;
					border-radius: 100rpx;
					margin-bottom: 18rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;
						// background-image: url(https://imgcdn.tutudati.com/c4d7.png);
					}
				}
			}
		}

		/* 登录方式切换 end */
		/* 内容 end */

	}

	::v-deep .input-placeholder {
		font-size: 24rpx;
		color: #E6E6E6;
	}
</style>